<template>
  <view v-if="!isLoading" class="container">
    <view class="teacher">
      <view class="avatar">
        <image class="cat" :src="$xyfun.image('/static/teacher_details/cat.png')"></image>
        <image class="image" :src="$xyfun.image(detail.avatar)"></image>
      </view>
      <view class="name">{{detail.nickname}}</view>
      <view class="grade">{{detail.grade_text}}/{{detail.subject_text}}</view>
    </view>

    <view class="crumb">
      <view :class="type=='info'?'item active':'item'" @tap="onType" data-type="info">信息</view>
      <view :class="type=='picture'?'item active':'item'" @tap="onType" data-type="picture">照片</view>
      <view :class="type=='comment'?'item active':'item'" @tap="onType" data-type="comment">评价</view>
    </view>

    <view v-if="type=='info' && common.auditConfig.audit_on==1">
      <view class="info_box">
        <view class="title">
          <image class="icon" :src="$xyfun.image('/static/teacher_details/cat2.png')"></image>
          个人信息
        </view>
        <view class="lists">
          <view class="item">
            <view class="label">性别</view>
            <view class="cont">{{detail.with.sex}}</view>
          </view>
          <view class="item">
            <view class="label">标签</view>
            <view class="cont">
              <view class="tag" v-for="(val,idx) in detail.with.tags_text">{{val}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="type=='info' && common.auditConfig.audit_on==0">
      <video class="video" :src="$xyfun.image(detail.with.person_video)" v-if="detail.with.person_video"></video>
      <view class="info_box">
        <view class="title">
          <image class="icon" :src="$xyfun.image('/static/teacher_details/cat2.png')"></image>
          个人信息
        </view>
        <view class="lists">
          <view class="item">
            <view class="label">性别</view>
            <view class="cont">{{detail.with.sex}}</view>
          </view>
          <view class="item">
            <view class="label">授课方式</view>
            <view class="cont">{{$xyfun.slashSplice(detail.with.teaching_method)}}</view>
          </view>
          <view class="item">
            <view class="label">入驻区域</view>
            <view class="cont">{{ detail.settled_all}}</view>
          </view>
          <view class="item">
            <view class="label">标签</view>
            <view class="cont">
              <view class="tag" v-for="(val,idx) in detail.with.tags_text">{{val}}</view>
            </view>
          </view>
          <view class="item">
            <view class="label">可授课区域</view>
            <view class="cont">{{detail.with.unholiday_pick}}</view>
          </view>
          <view class="item" v-if="detail.with.unholiday_areas">
            <view class="label"></view>
            <view class="cont">{{detail.with.unholiday_areas}}</view>
          </view>
          <view class="item">
            <view class="label">寒暑假区域</view>
            <view class="cont">{{detail.with.holiday_pick}}</view>
          </view>
          <view class="item" v-if="detail.with.holiday_areas">
            <view class="label"></view>
            <view class="cont">{{detail.with.holiday_areas}}</view>
          </view>
          <view class="item">
            <view class="label">教龄</view>
            <view class="cont">{{detail.with.teacher_age}}年</view>
          </view>
          <view class="item">
            <view class="label">所属院校</view>
            <view class="cont">
              <text style="padding-right: 20rpx;">{{detail.with.school_name}}</text>
              <text>{{detail.with.profession}}（{{detail.with.education}}）毕业</text>
              <view class="date">{{detail.with.learn_start}} - {{detail.with.learn_end}}</view>
            </view>
          </view>
          <view class="item">
            <view class="label">授课类型</view>
            <view class="type_list">
              <view class="line" v-for="(val,idx) in detail.give_lessons_text" v-if="val.grade && val.subject && val.age_range">
                <text class="color">{{idx==0?'主':'辅'}}</text>
                <text>{{val.age_range}}</text>
                <text class="vertical_line">|</text>
                <text>{{val.subject_cn}}</text>
                <text v-if="detail.only_teacher==0" class="price">￥{{val.advise_settled}}/两小时</text>
              </view>
              <view class="line" v-if="detail.only_teacher==1">
                <text class="color" style="opacity: 0;"></text>
                <text style="color: red;">该家教为专职教师，授课费用请面议</text>
              </view>
            </view>
          </view>
          <view class="item" style="margin-top: 65rpx">
            <view class="label">授课时间</view>
            <view class="give_time">
              <view class="thead">
                <view class="thead_first" :style="'background-image:url('+$xyfun.image('/static/other/diagonal-line.png')+')'">
                  <view>时间</view>
                  <view>周次</view>
                </view>
                <view>上午</view>
                <view>下午</view>
                <view>晚上</view>
              </view>
              <view class="tbody">
                <view class="th" v-for="(val,idx) in week_list">
                  <view class="tbody_first">
                    {{ val }}
                  </view>
                  <view>{{give_time[idx].morning}}</view>
                  <view>{{give_time[idx].afternoon}}</view>
                  <view>{{give_time[idx].night}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="info_box" style="margin-top: 60rpx" v-if="detail.with.teacher_exp_text.length>0">
        <view class="title">
          <image class="icon" :src="$xyfun.image('/static/teacher_details/teacher.png')"></image>
          教学经历
        </view>
        <view class="card_list">
          <view class="item" v-for="(val,idx) in detail.with.teacher_exp_text">
            <view class="info">
              <view class="tit">{{val.tit}}</view>
              <view class="date">{{val.start}} - {{val.end}}</view>
            </view>
            <view class="cont">
              {{val.content}}
            </view>
          </view>
        </view>
      </view>

      <view class="info_box" style="margin-top: 30rpx" v-if="detail.with.case_name && detail.with.case_content">
        <view class="title">
          <image class="icon" :src="$xyfun.image('/static/teacher_details/work_exp.png')"></image>
          成功案例
        </view>
        <view class="card_list">
          <view class="item">
            <view class="info">
              <view class="tit other_color">{{detail.with.case_name}}</view>
            </view>
            <view class="cont">
              {{detail.with.case_content}}
            </view>
          </view>
        </view>
      </view>

      <view class="info_box" v-if="detail.with.honor_images_text.length>0">
        <view class="title">
          <image class="icon" :src="$xyfun.image('/static/teacher_details/honor.png')"></image>
          荣誉证书
        </view>
        <view class="honor">
          <view class="item" v-for="(val,idx) in detail.with.honor_images_text">
            <image mode="widthFix" :src="$xyfun.image(val)"></image>
          </view>
        </view>
      </view>
    </view>

    <view v-if="type=='picture'">
      <view class="picture">
        <view class="item" v-for="(val,idx) in detail.with.photo_images">
          <image :src="$xyfun.image(val)" mode="aspectFill" @tap="previewImage(idx)"></image>
        </view>
      </view>
    </view>

    <view v-if="type=='comment'">
      <view class="comment">

        <view class="item" v-for="(val,idx) in comment_list">
          <view class="info">
            <view class="l">
              <image class="avatar" :src="$xyfun.image(val.student_avatar_text)"></image>
              <view class="user">
                <view>{{val.student_name_text}}</view>
                <text>{{ val.create_time_text }}</text>
              </view>
            </view>
            <view class="r">
              <view class="yz-iconfont yz-shoucang" :style="val.star>=1?'color:#ef9a38':''"></view>
              <view class="yz-iconfont yz-shoucang" :style="val.star>=2?'color:#ef9a38':''"></view>
              <view class="yz-iconfont yz-shoucang" :style="val.star>=3?'color:#ef9a38':''"></view>
              <view class="yz-iconfont yz-shoucang" :style="val.star>=4?'color:#ef9a38':''"></view>
              <view class="yz-iconfont yz-shoucang" :style="val.star>=5?'color:#ef9a38':''"></view>
            </view>
          </view>
          <view class="cont">{{val.content}}</view>
        </view>

      </view>
    </view>

    <view class="nav">
      <view class="but">
        <text class="yz-iconfont yz-shoucang1" @tap="collect" v-if="!detail.is_collect"></text>
        <text class="yz-iconfont yz-yishoucang" @tap="collect" v-else style="color:#ef9a38;"></text>
        <view>收藏</view>
      </view>
      <view class="but" @tap="showShareCode()">
        <text class="yz-iconfont yz-fenxiang"></text>
        <view>分享</view>
      </view>
      <button class="but" open-type="contact">
        <text class="yz-iconfont yz-xiaoxi"></text>
        <view>咨询</view>
      </button>
      <view class="rightnow" @tap="rightNow" v-if="common.auditConfig.audit_on==1">立即预约</view>
      <view class="rightnow" @tap="rightNow" v-if="common.auditConfig.audit_on==0">立即预约试课</view>
    </view>

    <view class="xy-modal-box xy-modal-box-center modal_week_picker" :class="[payModelShow?'xy-modal-show':'']">
      <view class="model_title">
        <text v-if="common.auditConfig.audit_on==0">* 请点击确认试课时间段</text>
        <text v-if="common.auditConfig.audit_on==1">* 请选择本周试课时间</text>
      </view>
      <view class="give_time" style="width: 600rpx;">
        <view class="thead">
          <view class="thead_first" :style="'background-image:url('+$xyfun.image('/static/other/diagonal-line.png')+')'">
            <view>时间</view>
            <view>周次</view>
          </view>
          <view>上午</view>
          <view>下午</view>
          <view>晚上</view>
        </view>
        <view class="tbody">
          <view class="th" v-for="(val,idx) in week_list">
            <view class="tbody_first">
              {{ val }}
            </view>
            <view :class="give_active_key===idx && give_active_timesec==='morning'?'active':''" @tap="pick_give_time(idx,'morning')">{{give_time[idx].morning}}</view>
            <view :class="give_active_key===idx && give_active_timesec==='afternoon'?'active':''" @tap="pick_give_time(idx,'afternoon')">{{give_time[idx].afternoon}}</view>
            <view :class="give_active_key===idx && give_active_timesec==='night'?'active':''" @tap="pick_give_time(idx,'night')">{{give_time[idx].night}}</view>
          </view>
        </view>
      </view>
      <view class="confirm_box">
        <view class="confirm" @tap="confirm">时间段确定</view>
      </view>
    </view>
    <view class="xy-modal-mask" :class="[payModelShow?'xy-mask-show':'']" @tap="payModelShow =!payModelShow"></view>
    <!--分享组件 -->
    <xy-share ref="xyShare" v-model="showShare" posterType="user" />
  </view>
</template>

<script>
import { mapState,mapActions } from 'vuex';
import xyShare from "@/components/xy-share/index.vue";
export default {
  components: {xyShare},
  data() {
    return {
      showShare:false,
      collectDisable : false,
      isLoading: true,
      confirmDisable : false,
      type : 'info',
      id : '',
      detail : {},
      with : {},
      week_list: [
        '周一',
        '周二',
        '周三',
        '周四',
        '周五',
        '周六',
        '周日'
      ],
      give_time: [
        {morning : '', afternoon : '', night : ''},
        {morning : '', afternoon : '', night : ''},
        {morning : '', afternoon : '', night : ''},
        {morning : '', afternoon : '', night : ''},
        {morning : '', afternoon : '', night : ''},
        {morning : '', afternoon : '', night : ''},
        {morning : '', afternoon : '', night : ''},
      ],
      give_active_key : '',
      give_active_timesec : '',
      payModelShow:false,

      comment_list: []
    };
  },
  computed: {
    ...mapState(['common','user'])
  },
  async onLoad(options) {
    uni.setNavigationBarTitle({
      title : this.common.auditConfig.pages_teacher_detail
    })
    this.id = options.id;
    var that = this;
    this.loadData();
  },
  onShow() {
    this.give_active_key = '';
    this.give_active_timesec = '';
    this.payModelShow = false;
  },
  methods:{
    async loadData() {
      this.$api.postBase({
        url: 'teacher/detail',
        loadingTip: '加载中...',
        data: {
          id : this.id
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.detail = res;
          this.detail.settled_type = this.detail.settled_type.join('/');
          this.detail.with.photo_images = this.detail.with.photo_images.split(',');
          this.detail.with.honor_images = this.detail.with.honor_images.split(',');
          this.give_time = res.give_time;
          this.isLoading = false;
        }
      })
      this.$api.postBase({
        url: 'teacher/comment_list',
        loadingTip: '加载中...',
        data: {
          teacher_id : this.id
        },
        success: res => {
          this.comment_list  = res;
        }
      })
    },
    onType(e){
      this.type = e.currentTarget.dataset.type;
    },
    collect(){
      if(this.collectDisable) return;
      this.collectDisable = true;
      this.$api.postBase({
        url: 'teacher/collect',
        loadingTip: '加载中...',
        data: {
          teacher_id : this.detail.user_id
        },
        success: res => {
          this.collectDisable = false;
          this.detail.is_collect = res;
        }
      })
    },
    pick_give_time(idx,timesec){
      if(idx===this.give_active_key && timesec===this.give_active_timesec){
        this.give_active_key = '';
        this.give_active_timesec = '';
        return;
      }
      if(this.give_time[idx][timesec]){
        this.give_active_key = idx;
        this.give_active_timesec = timesec;
      }
    },
    confirm(){
      if(this.confirmDisable) return;
      if(this.give_active_key==='' || this.give_active_timesec===''){
        this.$xyfun.msg('请选择每周上课时间')
        return;
      }
      if(this.give_time[this.give_active_key][this.give_active_timesec]===''){
        this.$xyfun.msg('请选择每周上课时间')
        return;
      }
      this.confirmDisable = true;
      var that = this;
      this.$api.postBase({
        url: 'teacher/create_order',
        data: {
          teacher_id : this.detail.user_id,
          per_week : this.give_active_key,
          per_timesec : this.give_active_timesec,
          per_week_time : this.give_time[this.give_active_key][this.give_active_timesec]
        },
        success: res => {

          this.$xyfun.msg('报名成功')
          setTimeout(function (){
            that.confirmDisable = false;
            that.$xyfun.to('/pages/user/order_detail?id='+res)
          },2000)
        },
        fail: res => {
          if(res.data=='self'){
            that.$xyfun.msg(res.msg);
          }
          if(res.data=='student_info_need_full'){
            uni.showModal({
              title: '提示',
              content: '请先完善学生信息',
              confirmText: '去完善',
              success: function (res) {
                if(res.confirm){
                  that.$xyfun.to('/pages/user/info')
                }
              }
            });
          }
          if(res.data=='to_buy_coupons'){
            uni.showModal({
              title: '提示',
              content: '您还没有购买试课券，可以点击按钮去购买',
              confirmText: '去购买',
              success: function (res) {
                if(res.confirm){
                  that.$xyfun.to('/pages/user/coupons')
                }
              }
            });
          }
          that.payModelShow = false;
          that.confirmDisable = false;
        }
      })
    },
    rightNow(){
      this.payModelShow = true;
    },
    previewImage(idx){
      let images = [];
      for(let i=0;i<this.detail.with.photo_images.length;i++){
        images.push(this.$xyfun.image(this.detail.with.photo_images[i]));
      }
      uni.previewImage({
        urls : images,
        current : idx
      })
    },
    //显示分享二维码
    showShareCode(){
      this.showShare = true;
    }
  }
}
</script>

<style>
page{
  padding-bottom: 100rpx;
}
</style>
<style lang="scss">
.container{
  padding-top: 20rpx;
}
.teacher{
  border-bottom: 1rpx solid #b0b0b0;
  border-top:1rpx solid #ccc9c9;
  position: relative;
  .avatar{
    text-align: center;
    position: relative;
    width: 150rpx;
    height: 150rpx;
    margin: 0 auto;
    .cat{
      position: absolute;
      top: 30rpx;
      left: -55rpx;
      width: 150rpx;
      height: 100rpx;
      z-index: 1;
    }
    .image{
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
      margin-top: 70rpx;
    }
  }
  .name{
    text-align: center;
    margin-top: 86rpx;
    font-size: 40rpx;
    font-weight: bold;
  }
  .grade{
    text-align: center;
    font-size: 28rpx;
    margin-top: 4rpx;
    margin-bottom: 20rpx;
    color: #777777;
  }
}

.crumb{
  display: flex;
  justify-content: space-around;
  .item{
    font-size: 30rpx;
    margin-top: 18rpx;
    color: #b0afaf;
    width: 33.33%;
    text-align: center;
  }
  .active{
    color: #efa44d;
    font-weight: bold;
    &:after{
      content: '';
      display: block;
      background: #efa44d;
      width: 40rpx;
      height: 8rpx;
      margin: 10rpx auto 0 auto;
      border-radius: 4rpx;
    }
  }
}

.info_box {
  margin-top: 10rpx;
  .title {
    font-size: 32rpx;
    margin: 20rpx 20rpx;
    display: flex;
    align-items: center;
    .icon {
      width: 50rpx;
      height: 50rpx;
      vertical-align: middle;
      margin-right: 10rpx;
    }
  }

  .lists {
    .item {
      display: flex;
      margin-bottom: 24rpx;

      .label {
        font-weight: bold;
        width: 144rpx;
        text-align: right;
        font-size: 24rpx;
      }

      .cont {
        width: 1rpx;
        flex-grow: 1;
        padding-left: 50rpx;
        font-size: 26rpx;

        .tag {
          font-size: 20rpx;
          background: #fff0f0;
          height: 30rpx;
          border-radius: 6rpx;
          margin-top: 5rpx;
          display: inline-block;
          margin-right: 10rpx;
          padding: 3rpx 10rpx;
          &:nth-of-type(2n) {
            background: #e7f0ff
          }
        }
      }

      .date {
        font-weight: normal;
        color: #b0afaf;
        font-size: 22rpx;
        margin-top: 6rpx;
        margin-bottom: 20rpx;
      }

      .type_list {
        background: #fffaf3;
        border-radius: 10rpx;
        flex-grow: 1;
        margin-right: 30rpx;
        padding-top: 30rpx;
        padding-bottom: 10rpx;
        padding-right: 40rpx;
        box-sizing: border-box;
        margin-left: 30rpx;

        .line {
          width: 100%;
          box-sizing: border-box;
          padding-left: 30rpx;
          text-align: left;
          margin-bottom: 20rpx;
          font-size: 24rpx;
          .color {
            display: inline-block;
            width: 32rpx;
            box-sizing: border-box;
            height: 32rpx;
            text-align: center;
            border-radius: 5rpx;
            background: #ff9924;
            color: #ffffff;
            font-size: 20rpx;
            margin-right: 10rpx;
            margin-left: 20rpx;
          }
          .vertical_line{
            margin: 0 10rpx;
            color: grey;
          }
          .price {
            margin-left: 30rpx;
            color: red;
          }
          &:nth-of-type(2n) .color{
            background: #4f85de;
          }
        }
      }

      .give_time{
        width: 505rpx;
        margin-left: 40rpx;
        font-size: 22rpx;
      }
    }
  }

  .card_list {
    padding: 10rpx 10rpx;
    border-radius: 8rpx;
    margin:0 20rpx;

    .item:nth-of-type(2n){
      background: #fffaf3;
      border-radius: 8rpx;
      padding:20rpx 20rpx;

    }
    .item {
      background: #fff6f6;
      border-radius: 8rpx;
      padding:20rpx 20rpx 30rpx 20rpx;
      margin-bottom: 20rpx;
      .info {
        display: flex;
        justify-content: space-between;
        margin:20rpx 20rpx;
        .tit {
          font-size: 24rpx;
          &:before{
            content: '';
            display: inline-block;
            width: 15rpx;
            height: 15rpx;
            background: red;
            vertical-align: center;
            position: relative;
            top: -4rpx;
            border-radius: 50%;
            margin-right: 20rpx;
          }
        }
        .other_color{
          &:before{
            background: $uni-color-warning;
          }
        }
        .date {
          font-weight: normal;
          color: #b2b2b2;
          font-size: 28rpx;
        }
      }
      .cont {
        text-indent: 44rpx;
        margin: 0 20rpx;
        font-size: 28rpx;
        letter-spacing: 2rpx;
      }
    }
  }
}

.honor{
  margin: 60rpx 40rpx;
  .item{
    font-size: 30rpx;
    margin-bottom: 20rpx;
    image{
      width: 100%;
    }
  }
}

.video{
  width: calc(100% - 40rpx);
  margin: 20rpx 20rpx 0 20rpx;
}
.picture{
  display: flex;
  flex-wrap: wrap;
  width: 700rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  .item{
    margin-bottom: 14rpx;
    margin-right: 20rpx;
    image{
      width: 220rpx;
      height: 220rpx;
    }
    &:nth-of-type(3n){
      margin-right: 0;
    }
  }
}

.comment {
  padding: 30rpx 30rpx 0 30rpx;
  .item {
    margin-bottom: 16rpx;
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .l {
        display: flex;
        .avatar {
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
        .user {
          view {
            font-size: 28rpx;
            color: #000;
          }
          text {
            margin-top: -2rpx;
            display: block;
            font-size: 22rpx;
          }
        }
      }
      .r {
        display: flex;
        margin-right: 34rpx;
        margin-top: -6rpx;
        view {
          color: #e0e0e0;
          margin-right: 4rpx;
          font-size: 18rpx;
        }
      }
    }

    .cont {
      margin-top: 20rpx;
      background: #f6f6f6;
      border-radius: 12rpx;
      padding: 30rpx;
      font-size: 24rpx;
    }
  }
}

.nav{
  display: flex;
  background: #fff;
  border-top:2rpx solid #c0b7b7;
  padding: 10rpx 20rpx 6rpx 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  .but{
    width: 60rpx;
    margin: 0;
    margin-left: 34rpx;
    text-align: center;
    padding: 0;
    line-height: unset;
    background: unset;
    border: none;
    box-shadow: none;
    height: unset;
    &:after{
      display: none;
    }
    text{
      font-size: 50rpx;
    }
    view{
      font-size: 22rpx;
    }
  }
  .rightnow{
    margin-top: 10rpx;
    background: #ef9a38;
    color: #ffffff;
    margin-left: 70rpx;
    margin-bottom: auto;
    padding: 8rpx 0;
    width: 350rpx;
    text-align: center;
    border-radius: 40rpx;
    font-size: 32rpx;
  }
}
.modal_week_picker{
  width: 700rpx;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding : 30rpx 0;
  border-radius: 20rpx;
  .model_title{
    text-align: left;
    margin-top: 20rpx;
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
    color: #ef9a38;
    width: 600rpx;
    letter-spacing: 3rpx;
  }
  .give_time{
    .active{
      background: #4cd964;
      color: #fff;
    }
  }
  .confirm_box{
    display: flex;
    justify-content: flex-end;
    width: 600rpx;
    margin-top: 30rpx;
    .confirm{
      font-weight: bold;
      margin-top: 4rpx;
      background: $uni-color-warning;
      color: #ffffff;
      margin-left: 48rpx;
      margin-bottom: auto;
      padding: 10rpx 80rpx;
      border-radius: 40rpx;
      font-size: 30rpx;
    }
  }
}
</style>
